<template>
    <el-card shadow="always" body-style="{ padding :'20px'}">
        <template #header>
            <el-button type="primary" size="default" :icon="Plus" @click="">添加</el-button>
        </template>
        <!-- card body-->
        <el-table style="margin-bottom: 30px" :data="tableData" border stripe>
            <el-table-column type="index" label="序号" width="180" align="center">
            </el-table-column>
            <el-table-column prop="tmName" label="品牌名称" width="180">
            </el-table-column>
            <el-table-column prop="logoUrl" label="品牌logo" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <el-button type="warning" size="small" :icon="Edit">修改</el-button>
                <el-button type="danger" size="small" :icon="Delete">删除</el-button>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination 
        layout="prev, pager, next" 
        :total="total"
        v-model:page-size="limit"
        v-model:current-page="page"
        :pager-count="5"
        >
        </el-pagination>
 
    </el-card>
</template> 
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Trademark",

});
</script>

<script setup lang="ts">
import { Plus, Edit, Delete } from "@element-plus/icons-vue"
import { ref,toRefs } from "vue"
import {requestTrademarkList} from "@/api/trademark"
//1.table的逻辑
//tabel数据
const tableData = ref<any>([
    {
        id: 1,
        tmName: "小米",
        logoUrl: "/static/default.jpg",
    },
    {
        id: 2,
        tmName: "苹果",
        logoUrl: "/static/default.jpg",
    },
]);
//2.页码逻辑
//页码的类型
interface pageDateType {
    page: number;
    limit: number;
    total: number;
}
//页码的数据
const pageDate = ref<pageDateType>({
    page: 1,
    limit: 3,
    total: 100,
})
//解构页码的属性
const {page,limit,total} = toRefs(pageDate.value)
//监听页码的改变，然后重新发送请求

//3.获取品牌列表
//封装获取品牌列表功能的函数
const getTrademarkList = async ()=>{
 const result =  await requestTrademarkList({page:page.value,limit:limit.value})

}
</script> 